<script>
import {handleSuccess, handleError} from "@/util/request";
export default {
  name: "ProductSavePage",
  data() {
    return {
      item:{},
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ]
      },
      action: process.env.VUE_APP_API_BASE + 'product/batch-import'
    }
  },
  methods: {
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post('/product/save', this.item)
              .then((result)=>{
                handleSuccess(result)
              })
              .catch((error) => {
                handleError(error)
              })
        }
      });
    },
    handleReset(formName) {
      this.$refs[formName].resetFields();
    },
    onSuccess(result) {
      handleSuccess({data: result})
    },
    onError(error) {
      handleError(error)
    }
  }
}
</script>

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>添加商品</span>
      <el-upload :action="action"
                 accept=".xls,.xlsx"
                 :show-file-list="false"
                 :on-success="onSuccess"
                 :on-error="onError"
                 with-credentials
                 style="float: right">
        <el-button style="padding: 3px 0" type="text">批量导入Excel</el-button>
      </el-upload>
    </div>
    <el-form label-width="100px" ref="myForm" :model="item" :rules="rules">
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="item.name" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="库存数量" prop="stock">
        <el-input v-model="item.stock" placeholder="请输入商品库存" />
      </el-form-item>
      <el-form-item label="库存预警" prop="warningStock">
        <el-input v-model="item.warningStock" placeholder="请输入库存预警" />
      </el-form-item>
      <el-form-item label="商品品牌" prop="brand">
        <el-input v-model="item.brand" placeholder="请输入商品品牌" />
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model="item.price" placeholder="请输入商品价格" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSubmit('myForm')" type="primary">提交</el-button>
        <el-button @click="handleReset('myForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>

</style>